<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        
        <title>Google Fusion tables - Google maps jQuery plugin</title>
        <meta name="keywords" content="Google maps, jQuery, plugin, Google Fusion tables, Orange, contact" />
		<meta name="description" content="A representation of social contact on gmaps" />
		<meta http-equiv="content-language" content="en" />
		
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
		
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css" />
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssbase/base-min.css" />
		<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssfonts/fonts-min.css" />
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css" />	 
		<link rel="stylesheet" type="text/css" href="css/main.css" />

		<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
        
<!--         <script src="http://www.google.com/jsapi?key=YOUR-KEY-HERE" type="text/javascript"></script>         -->
<!--         <script type="text/javascript"> -->
<!-- 			google.load("maps", "3", {'other_params':'sensor=true'}); -->
<!-- 			google.load("jquery", "1.5"); -->
<!-- 			google.load("jqueryui", "1.8.9"); -->
<!-- 		</script> -->
        <script type="text/javascript" src="../ui/jquery.ui.map.min.js"></script>
      
	</head>
    <body>
		
		<div id="doc">
		
			<div id="hd">
				<h2><span class="gmap-title">Orange PrimeZone</span><br/>Contact Localisation</h2>
			</div>
			
			<div class="gradient ui-corner-all shadow-all" id="map_item">
                <div id="map_canvas"></div>
				
            </div>
			
			<p><strong>Zoom</strong> in and tap on marker for contact details. <strong>Tap</strong> on buttons to toggle fusion layers or map options.<br/></p>

			<a class="buttonize" id="ex1-heatmap">Facebook</a>
			<a class="buttonize" id="ex1-query" style="margin:0 7px;">linkdin</a>
			<a class="buttonize" id="ex1-bicycle">twitter</a>
			<a class="buttonize" id="ex1-traffic" style="margin:0 7px;">google+</a>
			
		
			<div id="gmap-info">
			<h3 style="color:#ff7e00;">Thanks to MAPS/SHINE</h3>
			
			</div>
			<div id="dialog"></div>
		</div>
		<div class="ftbar">
			<p><a class="buttonize ftr" rel="external" href="../index.html">Return to Menu</a><a class="buttonize ftr" style="float:right;" rel="external" href="../about.html">About GMap Demo</a></p>		
		</div>

		<script type="text/javascript">
		//<![CDATA[
		$(function() {
			//function detectBrowser() {
 			var useragent = navigator.userAgent;
  			var mapdiv = document.getElementById("map_canvas");
 			var mapitem = document.getElementById("map_item");
  			var doc = document.getElementById("doc");
			var gmapinfo = document.getElementById("gmap-info");
			var info_window;
  			//alert(userAgent);
       
  			if ((useragent.indexOf('Android 3.') != -1) && (screen.width >= 800) && (screen.height >= 800)) {
 				doc.style.width = '780px';
 				doc.style.maxWidth = '1240px';
				doc.style.margin = 'auto';  //  '0 0.4em';
  				doc.style.padding = '0 0.8em';
  					  				
 				mapdiv.style.height = '580px';
 					
 				mapitem.style.margin = '0 0 1.5em';
 				mapitem.style.padding = '0.8em';
				gmapinfo.style.display = 'block';
			} else if ((useragent.indexOf('Android 2.') != -1 ) || (useragent.indexOf('Android 3.') != -1 )) {
 				//alert('android phone');
 				doc.style.width = screen.width;
 				doc.style.maxWidth = '490px';
  				doc.style.margin = '0 0.2em';
  				doc.style.padding = '0 0.3em';
  					
 				mapdiv.style.height = '300px';
 				
 				mapitem.style.margin = '0 0 1em';
 				mapitem.style.padding = '0.4em';
 			} else {	
  				//alert('desktop or not android');
  				doc.style.width = '900px';
  				doc.style.minWidth = '800px';
  				doc.style.maxWidth = '900px';
  				doc.style.margin = 'auto';
  				doc.style.padding = '2em';
  					
    			mapdiv.style.height = '450px';
    				
 				mapitem.style.margin = '0 0 2em';
 				mapitem.style.padding = '1em';
 				gmapinfo.style.display = 'block';
  			}

			$('.buttonize').fadeIn(3000);
								
			$('#dialog').append('<br/><br/><p>Loading Orange Contact fusion table</p>');
			$("#dialog").dialog({ title : 'Contact Layer', closeOnEscape: false, modal : 'true', hide: 'fade', maxHeight: 200 });

			$('#map_canvas').gmap({ 'center': new google.maps.LatLng(46.785016, 2.611084), 'zoom': 6, 'mapTypeId' : google.maps.MapTypeId.ROADMAP,
				'callback': function(map) {
					
					$('#map_canvas').gmap('loadFusion', {'query' : { 'from': '1909429', 'select' : 'Location', 'where' : 'User_ID=toto' } });
					var t = setTimeout(function() {$('#dialog').dialog('close');}, 2000);						
				}
			});						
			$('#map_canvas').gmap('getService', 'FusionTablesLayer').setOptions( {clickable : true  });
			$('#map_canvas').gmap('getService', 'FusionTablesLayer').setOptions( {'heatmap' : { enabled: false }});
			
			$('#ex1-heatmap').toggle (function() {
				$('#map_canvas').gmap('getService', 'FusionTablesLayer').setOptions( {'query' : { 'from': '1909429', 'select' : 'Location,Contact_Name,ServiceName', 'where' : 'ServiceName=Facebook' }});
			}, function() {
               
               }
			);
			$('#ex1-query').toggle (function() {
					$('#map_canvas').gmap('getService', 'FusionTablesLayer').setOptions( {'query' : { 'from': '1909429', 'select' : 'Location,Contact_Name,ServiceName', 'where' : 'ServiceName=linkdin' }});
				}, function() {
					
                      }
			);
			var trafficLayer = new google.maps.TrafficLayer();
			$('#ex1-traffic').toggle (function() {
                trafficLayer.setMap($('#map_canvas').gmap('getMap')); 
            }, function() {
                trafficLayer.setMap(null); 
            }
			);
			var bicycleLayer = new google.maps.BicyclingLayer();
			$('#ex1-bicycle').toggle (function() {
				bicycleLayer.setMap($('#map_canvas').gmap('getMap'));
			}, function() {
                bicycleLayer.setMap(null); 
            }
			);	
			
     });
	
//]]>
		</script>

    </body>
</html>



      